<template>
  <div>
      <div class="cities">
        <button v-for="item of cities" :key="item" @click="ChangeCity(item)">
          {{item}}
        </button>
      </div>
  </div>
</template>

<script>
import { onMounted, toRefs,reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex';
export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    console.log(store);
    console.log(router);
    const state = reactive({
      cities:["北京","上海","杭州","西安"],
      ChangeCity(val){
        console.log(val);
        store.commit("changeCity",val)
        router.back();
      }
    })
    onMounted(() => {
      
    });
    const refState = toRefs(state);
    return {
        ...refState
    }
  }
}
</script>

<style>

</style>